<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>timeglider example - by nodexy</title>
<link rel="stylesheet" href="css/aristo/jquery-ui-1.8.5.custom.css"
	type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="js/timeglider/Timeglider.css" type="text/css"
	media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/base.css" type="text/css" charset="utf-8"/>
<script src='js/jquery-1.4.4.min.js' type='text/javascript'></script>
<script src='js/jquery-ui-1.8.9.custom.min.js' type='text/javascript'></script>
<script src='js/timeglider.min.js' type='text/javascript'></script>
</head>
<body>
<div style="padding: 10px;">
	<h1>timeglider example </h1>
	<p>
		BY nodexy 
	</p>
	<p style="font-size: 12px;">
		timeglider demo : <a href="demo.html">DEMO</a>
		<br/>
		timeglider website: <a href="http://www.timeglider.com" target="_blank">http://www.timeglider.com</a>
		<br/>
		another one: <a href="http://www.tiki-toki.com" target="_blank">http://www.tiki-toki.com</a>
	</p>
</div>

<!-- html: -->
   <div id='placement' style="height: 500px;"></div>
    
<!-- js: -->
	<script type="text/javascript">
   $(document).ready(function () { 
      var tg1 = $("#placement").timeline({
         //"data_source":"./json/flickr.json",
         "data_source": "#mylife",
         "min_zoom":15,
         "max_zoom":60, 
         "timezone": "+08:00"  
     });
   });
	</script>

<table class='timeline-table' id="mylife" focus_date="1985-06-12" title="my life" initial_zoom="48" description="The Wild and Wooly times of Michael Richardson.">
	
    
    <!-- The first row of the table is reserved for meta-data.
    
         Class values below are *critical* for mapping out data from the 
	     <td> elements that follow ---  though order is not important.
         The text in <td> elements is *not* critical: just the class names.
    -->
    <tr>
    <th class="tg-startdate">start date</th>
	<th class="tg-enddate">end date</th>
    <th class="tg-title">title</th>
    <th class="tg-description">description</th>
	<th class="tg-icon">icon</th>
	<th class="tg-importance">importance</th>
	<th class="tg-link">link</th>	
    </tr>
    
    
    <!-- EVENTS ARE IN THE 2nd+ ROWS OF THE TABLE. While appropriate for viewing
         as a visual table, order of rows is not important. 
    -->
    <tr>
      <td>1968-08-20</td>
      <td></td>
      <td>Born</td>
		<td>Valley hospital in Ridgewood, NJ, to Martha &amp; Steve Richardson.</td>
		<td>circle_green.png</td>
		<td>50</td>
		<td>http://www.ridgewoodnj.net/main.cfm</td>
    </tr>

	<tr>
      <td>1982-09-01</td>
      <td>1986-06-20</td>
      <td>HHS</td>
		<td>Hanover (NH) High School.</td>
		<td>star_blue.png</td>
		<td>32</td>
		<td>http://hanoverhigh.us/Hanover/</td>
    </tr>

	<tr>
      <td>1987-03-01</td>
      <td>1987-07-20</td>
      <td>Asia</td>
		<td>Thailand, India, and Nepal</td>
		<td>circle_orange.png</td>
		<td>32</td>
		<td></td>
    </tr>

	<tr>
      <td>1986-09-01</td>
      <td>1992-06-01</td>
      <td>Wesleyan</td>
		<td>After six years of too little sex, too many drugs, and questionable rock and roll.</td>
		<td>star_blue.png</td>
		<td>32</td>
		<td>http://wesleyan.edu</td>
    </tr>

	<tr>
      <td>1995-09-05</td>
      <td>today</td>
      <td>Marriage</td>
		<td></td>
		<td>star_green.png</td>
		<td>45</td>
		<td></td>
    </tr>

  </table>

<br/>
<div id="footer">
	<center>&copy; nodexy</center>
</div>

</body>
</html>